<template>
  <div class="messageCard flex5"> 
    <div class="left" :style="`background-color:${color}`"><i :class="`iconfont ${icon}`"></i></div>
    <div class="right">
      <div class="text1"><slot name="title"></slot></div>
      <div class="text2" :style="`color:${color}`"><slot name="num"></slot></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
defineProps({
  icon: {
    type: String,
    default: "icon-a-jianzhugongsi",
  },
  color:{
    type:String,
    default:'blue',
  }
});
</script>

<style scoped lang="scss">
.messageCard {
  width: 300px;
  height: 90px;
  background-color:#ffffff;
  padding: 0 20px;
  box-sizing: border-box;

}
.left {
  border-radius: 50%;
  overflow: hidden;
  width: 60px;
  height: 60px;
  text-align: center;
  
}
.iconfont {
  font-size: 30px;
  color:#fff;
  border-radius: 50%;
  line-height: 60px;
}
.right{
    margin-left: 10px;
    .text1{
      margin-bottom: 15px;
      color: #9fa19f;
      font-size: 12px;
    }
    .text2{
      font-size: 18px;
      font-weight: 1000;
    }
}


</style>
